<template>
  <div style="margin-top: 20px;padding-bottom: 50px;">
    <div>
      <van-radio-group v-model="radio"
                       @change="RadioChange">
        <van-radio v-for="(item, i) in hero"
                   :key="i"
                   :name="item._id">{{item.name}}</van-radio>
      </van-radio-group>
    </div>
    <div class="AllHero">
      <div v-for="(item, i) in show"
           :key="i"
           class="hero"
           @click="openEject(item)">
        <ImgShow :name="item.name"
                 :icon="$upload+item.icon"
                 :size="70" />
      </div>
    </div>
    <div v-if="isEject">
      <van-popup v-model="isEject"
                 round
                 position="bottom"
                 transition-appear>
        <van-loading size="36px"
                     v-if="isLoading">加载中...</van-loading>
        <div v-if="!isLoading"
             class="main">
          <div class="icon">
            <ImgShow :icon="$upload+ejectShow.icon"
                     :size="70" />
          </div>
          <div class="scores">
            <div v-for="( item,name, i) in ejectShow.scores"
                 :key="i">
              <van-progress :percentage="(item*10)"
                            :pivot-text="names(name)" />
            </div>
          </div>
          <div class="line">
            <span>【推荐装备1】</span>
            <div class="child">
              <ImgShow v-for="(item, i) in ejectShow.items1"
                       :key="i"
                       :icon="$upload+item.icon"
                       :size="30" />
            </div>
          </div>
          <div class="line">
            <span>【推荐装备2】</span>
            <div class="child">
              <ImgShow v-for="(item, i) in ejectShow.items2"
                       :key="i"
                       :icon="$upload+item.icon"
                       :size="30" />
            </div>
          </div>
          <div class="line">
            <span>【推荐召唤师技能】</span>
            <div class="child">
              <ImgShow v-for="(item, i) in ejectShow.Hero_Skill"
                       :key="i"
                       :icon="$upload+item.icon"
                       :size="30" />
            </div>
          </div>
          <div class="line">
            <span>【推荐铭文】</span>
            <div class="child">
              <ImgShow v-for="(item, i) in ejectShow.Insc"
                       :key="i"
                       :icon="$upload+item.icon"
                       :size="30" />
            </div>
          </div>
          <div class="tips">
            <span> 【使用技巧】</span>
            <p>{{ejectShow.usageTips}}</p>
          </div>
          <div class="tips">
            <span>【对战技巧】</span>
            <p>{{ejectShow.battleTips}}</p>
          </div>
          <div class="tips">
            <span>【团战技巧】</span>
            <p>{{ejectShow.teamTips}}</p>
          </div>
          <div class="btn">
            <van-button type="info"
                        @click="SkinShow">皮肤鉴赏</van-button>
            <van-button type="info"
                        @click="SkillShow">技能解析</van-button>
          </div>
        </div>
      </van-popup>
    </div>
    <div class="skill">
      <van-dialog v-model="isSkill"
                  :showConfirmButton=false
                  close-on-click-overlay>
        <table>
          <thead>
            <tr>
              <th>技能名称</th>
              <th>技能描述</th>
              <th>技能冷却</th>
              <th>技能消耗</th>
            </tr>
          </thead>
          <tr v-for="(item, i) in ejectShow.skills"
              :key="i">
            <td>
              <ImgShow :icon="$upload+item.icon"
                       :size="15" />
              {{item.name}}
            </td>
            <td>{{item.descript}}</td>
            <td>{{item.cd}}</td>
            <td>{{item.consume}}</td>
          </tr>
        </table>
      </van-dialog>
    </div>
    <div class="skin">
      <van-dialog v-model="isSkin"
                  :showConfirmButton=false
                  close-on-click-overlay>
        <van-swipe :autoplay="2000">
          <van-swipe-item v-for="(item, i) in ejectShow.skins"
                          :key="i">
            <img v-lazy="$upload+item"
                 width="300px"
                 height="150px" />
          </van-swipe-item>
        </van-swipe>
      </van-dialog>
    </div>

  </div>
</template>

<script>
import ImgShow from '../utils/ImgShow'
import { getHero, getHeroById } from '@/api/introduction'
export default {
  components: { ImgShow },
  data () {
    return {
      hero: [],
      radio: 0,
      show: [],
      isEject: false,
      isSkin: false,
      isSkill: false,
      ejectShow: {},
      isLoading: false
    }
  },
  methods: {
    fetch () {
      getHero().then(res => {
        this.hero = res.data
        this.radio = res.data[0]._id
      })
    },
    RadioChange () {
      const tmp = this.hero.find(item => item._id === this.radio)
      this.show = tmp.children
    },
    openEject (item) {
      this.ejectShow = {}
      this.isEject = !this.isEject
      this.isLoading = !this.isLoadingE
      getHeroById(item._id).then(res => {
        this.ejectShow = res.data
        this.isLoading = !this.isLoading
      }).catch(() => {
        this.isEject = !this.isEject
      })
    },
    SkinShow () {
      this.isSkin = !this.isSkin
    },
    SkillShow () {
      this.isSkill = !this.isSkill
    }
  },
  created () {
    this.fetch()
  },
  computed: {
    names: function () {
      return name => {
        switch (name) {
          case 'difficult':
            return '难度'
          case 'skills':
            return '技能'
          case 'attack':
            return '伤害'
          case 'survive':
            return '生存'
          default:
            break
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.van-radio-group {
  display: flex;
  justify-content: space-around;
}
.AllHero {
  display: flex;
  flex-wrap: wrap;
  .hero {
    margin-top: 10px;
    width: 25%;
    height: 85px;
  }
}
.van-popup {
  .main {
    div {
      margin-top: 0;
    }
  }
  .scores {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    div {
      margin-bottom: 5px;
      height: 20px;
    }
  }
  .line {
    display: flex;
    align-items: center;
    span {
      font-size: 16px;
    }
    .child {
      display: flex;
    }
    .child > * {
      margin-right: 5px;
    }
  }
  .tips {
    span {
      font-size: 16px;
    }
    p {
      font-size: 12px;
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
  }
}
.skin {
  .van-dialog {
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.skill {
  .van-dialog {
    table {
      border-collapse: collapse;
      thead {
        tr {
          th {
            font-size: 12px;
            border: 1px solid black;
          }
        }
      }
      tr {
        td {
          border: 1px solid black;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
